<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--优先使用IE最新版本和Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--移动设备上屏幕显示区域的设置-->
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!--主要是针对苹果手机将数字自动识别为号码-->
    <meta name="format-detection" content="telephone=no">
    <!--启用全屏模式，伪装app，离线应用。-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--隐藏状态栏/设置状态栏颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器-->
    <meta name="HandheldFriendly" content="True">
    <!-- 微软的老式浏览器 告诉浏览器页面为某个宽度特殊优化-->
    <meta name="MobileOptimized" content="width">
    <!--指定适合自己网站的渲染内核名称-->
    <meta name="renderer" content="webkit" />
    <title>爱投教-公司简介</title>
    <link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<body>

<div class="container">
    <div class="content">
        <img class="main-bg" src="images/company_bg1.png">
        <a href="../p11"><img class="pbtn" id="pbtn" src="./images/btn0.png"/></a>
        <a href="../teachers"><img class="gbtn" id="gbtn" src="./images/btn1.png"/></a>
    </div>
</div>
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../js/navigation.js"></script>
<script type="text/javascript">
    window.onload = function(){
        let PBTNTOP = 0.93897;          // 产品按钮top比
        let PBTN_WH_RATIO = 4;    // 购买按钮宽高比
        let PBTN_HALL_RATIO = 0.0172;  // 购买按钮高占全高比

        var dh = document.body.clientHeight;
        var pBtnTop = $("#pbtn").offset().top;
        var btnPW = $("#pbtn").width();
        var btnPH = $("#pbtn").height();

        $(document).ready(function(){//在文档加载完毕后执行

            btnPH = dh * PBTN_HALL_RATIO;
            btnPW = btnPH * PBTN_WH_RATIO;
            pBtnTop = PBTNTOP * dh;
            $("#pbtn").css("width", btnPW);
            $("#pbtn").css("height", btnPH);
            $("#pbtn").css("top", pBtnTop);
            $("#pbtn").css("margin-left", -btnPW*17/12);

            $("#gbtn").css("width", btnPW);
            $("#gbtn").css("height", btnPH);
            $("#gbtn").css("top", pBtnTop);
            $("#gbtn").css("margin-right", -btnPW*17/12);

            var onResize = function() {
                var dh = document.body.clientHeight;
                btnPH = dh * PBTN_HALL_RATIO;
                btnPW = btnPH * PBTN_WH_RATIO;
                pBtnTop = PBTNTOP * dh;

                $("#pbtn").css("width", btnPW);
                $("#pbtn").css("height", btnPH);
                $("#pbtn").css("top", pBtnTop);
                $("#pbtn").css("margin-left", -btnPW*17/12);

                $("#gbtn").css("width", btnPW);
                $("#gbtn").css("height", btnPH);
                $("#gbtn").css("top", pBtnTop);
                $("#gbtn").css("margin-right", -btnPW*17/12);

            }
            window.onresize=onResize;

        })
    }

</script>
</body></html>